<template>
  <header class="app-header border-bottom">
    <h3 class="title text-center" v-if="this.$route.path === '/chat'">
      消息中心
    </h3>
    <h3 class="title text-center" v-else-if="this.$route.path === '/spot'">
      探索发现
    </h3>
    <span
      class="header-btn header-btn-left expend-touch"
      @click="backAction"
      v-if="this.$route.path === '/chat/chat-item'"
    >
      <i class="iconfont icon-xialajiantouxiao"></i>
      返回
    </span>

    <span
      class="header-btn header-btn-left expend-touch"
      @click="showPopup"
      v-if="
        this.$route.path ===
        `/home/detail/${$route.params.id}/createorder/payment`
      "
    >
      <i class="iconfont icon-xialajiantouxiao"></i>
    </span>

    <span
      class="header-btn header-btn-left expend-touch"
      @click="backAction"
      v-if="this.$route.path === `/home/detail/${$route.params.id}/createorder`"
    >
      <i class="iconfont icon-xialajiantouxiao"></i>
    </span>

    <h3 class="title text-center" v-if="this.$route.path === '/chat/chat-item'">
      聊天窗口
    </h3>
    <span
      class="header-btn header-btn-left expend-touch"
      @click="homeAction"
      v-if="this.$route.path ===`/mine/myorder/orderlist/${$route.params.orderId}`"
    >
      <i class="iconfont icon-xialajiantouxiao"></i>
    </span>

    <h3 class="title text-center" v-if="this.$route.path ===`/mine/myorder/orderlist/${$route.params.orderId}`">
    订单详情
    </h3>


    <h3
      class="title text-center"
      v-if="
        this.$route.path ===
        `/home/detail/${$route.params.id}/createorder/payment`
      "
    >
      支付订单
    </h3>

    <h3
      class="title text-center"
      v-if="
        this.$route.path ===
        `/home/detail/${$route.params.id}/createorder`
      "
    >
    确认订单
    </h3>
    <h3
      class="title text-center"
      v-if="
        this.$route.path ===
        `/home/detail/${$route.params.id}/createorder/payment/paymentdetail`
      "
    >
    支付成功
    </h3>
    
    <van-popup v-model="show" :style="{ height: '99px', width: '279px' }">
      <div class="top">
        <div class="shang border-bottom">旅程近在眼前，确定现在离开吗？</div>
        <div class="xia">
          <span class="border-right" @click="$router.back()">确认离开</span>
          <span @click="show = false">继续预定</span>
        </div>
      </div>
    </van-popup>
  </header>
</template>

<script>
import { Popup } from "vant";
export default {
  name: "app-header",
  components: {
    [Popup.name]: Popup,
  },

  data() {
    return {
      show: false,
    };
  },
  methods: {
    // 返回上一页
    backAction() {
      this.$router.back();
    },
    showPopup() {
      this.show = true;
    },
    homeAction(){
      this.$router.replace("/home")
    }
  },
};
</script>

<style scoped lang="scss">
@function vw($px) {
  @return ($px/375) * 100vw;
}
.app-header {
  width: 100%;
  height: vw(60);
  position: absolute;
  top: 0;
  left: 0;
  background-color: #f66;
  .title {
    width: 100%;
    height: 100%;
    font-size: vw(18);
    font-weight: bold;
    color: #fff;
  }
  .header-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    color: #fff;

    &.header-btn-left {
      left: vw(10);
    }
    .iconfont {
      display: inline-block;
      font-size: 16px;
      transform: rotate(90deg);
      color: #fff;
    }
  }
  .top {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 0 vw(10);
    text-align: center;
    .shang {
      height: vw(55);
      width: 100%;
      color: #333;
      line-height: vw(55);
    }
    .xia {
      display: flex;
      flex: 1;
      span {
        display: flex;
        height: 100%;
        justify-content: center;
        align-items: center;
        width: 49%;
      }
    }
  }
}
</style>
